<template>
  <a-form-model
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        style="width: 100%;"
    >
        <a-form-model-item prop="oldPassword">
            <a-input-password
                v-model.trim="form.oldPassword"
                size="large"
                placeholder="请输入旧密码"
                :maxLength="18"
            >
                <a-icon slot="prefix" type="lock" />
            </a-input-password>
        </a-form-model-item>
        <a-form-model-item prop="newPassword">
            <a-input-password
                v-model.trim="form.newPassword"
                size="large"
                placeholder="请输入新密码"
                :maxLength="18"
            >
                <a-icon slot="prefix" type="lock" />
            </a-input-password>
        </a-form-model-item>
        <a-form-model-item prop="password">
            <a-input-password
                v-model.trim="form.password"
                size="large"
                placeholder="请再次确认新密码"
                :maxLength="18"
            >
                <a-icon slot="prefix" type="lock" />
            </a-input-password>
        </a-form-model-item>
        <div style="padding-top: 10px">
          <a-button @click="cancel">取消</a-button>
          <a-button @click="doConfirm" style="margin-left: 10px;" type="primary">确定</a-button>
        </div>
    </a-form-model>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'
import Regex from "@/utils/regex"
import { commonValidate } from "@/utils/util"
import { PWD_TIPS } from "@/utils/consts"

export default {
  name: "paswordChange",
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    cancel: {
      type: Function,
      default: () => () => {}
    },
    confirm: {
      type: Function,
      default: () => () => {}
    }
  },
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        password: ''
      },
      rules: {
        oldPassword: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckOldPassword
          }
        ],
        newPassword: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckNewPassword
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckPassword
          }
        ]
      }
    }
  },
  methods: {
    // 校验旧密码
    onCheckOldPassword(rule, value, callback) {
      if (!value) {
        callback('请输入旧密码')
        return;
      }
      if (!Regex.passwordNew.test(value)) {
        callback(PWD_TIPS)
        return;
      }
      callback()
    },
    // 校验新密码
    onCheckNewPassword(rule, value, callback) {
      if (!value) {
        callback('请输入新密码')
        return;
      }
      if (!Regex.passwordNew.test(value)) {
        callback('密码需包含大小写字母，数字和特殊字符，8-18位')
        return;
      }
      if (value === this.form.oldPassword) {
        callback('新密码不能和旧密码一致，请修改')
        return;
      }
      callback()
    },
    // 二次校验密码
    onCheckPassword(rule, value, callback) {
      if (!value) {
        callback('请输入确认密码')
        return;
      }
      if (!Regex.passwordNew.test(value)) {
        callback(PWD_TIPS)
        return;
      }
      if (value === this.form.oldPassword) {
        callback('确认密码不能和旧密码一致，请修改')
        return;
      }
      if (value !== this.form.newPassword) {
        callback('两次输入的新密码不一致，请修改')
        return;
      }
      callback()
    },
    async doConfirm() {
      const confirmValidate = await commonValidate(this.$refs.ruleFormRef)
      if (!confirmValidate) return
      const params = cloneDeep(this.form)
      params.oldPassword = this.$md5(params.oldPassword)
      params.newPassword = this.$md5(params.newPassword)
      params.password = this.$md5(params.password)
      this.confirm(params)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
